<template>
  <div class="leftMenu">
    <div class="logo"><div class="bjs-logo">Forest Secret</div></div>

    <!-- ────────────────────────────────────────────── 菜单 ────────────────────────────────────────────── -->
    <el-menu
      class="menu bjs-menu"
      :background-color="theme === 'light' ? '#f5f5f5' : '#403e44'"
      :unique-opened="true">
      <el-menu-item
          v-for="menu of menus"
          :index="menu.menuId.toString()"
          :key="menu.menuId"
          @click="toMenu(menu.path)">
        <template slot="title"><i :class="menu.icon"></i><span>{{menu.menuName}}</span></template>
      </el-menu-item>
    </el-menu>

    <!-- ────────────────────────────────────────────── 工具栏 ────────────────────────────────────────────── -->
    <div class="radio">
      <el-divider class="divider" content-position="left" ></el-divider>
      <el-radio-group size="mini" v-model="ssResultType" @change="radioChangeHandler">
          <el-radio-button class="bjs-radio url"      label="1"><i class="iconfont icon-url"></i></el-radio-button>
          <el-radio-button class="bjs-radio markdown" label="2"><i class="iconfont icon-markdown1"></i></el-radio-button>
          <el-radio-button class="bjs-radio picture"  label="3"><i class="iconfont icon-picture1"></i></el-radio-button>
      </el-radio-group>
      <el-switch
          class="bjs-switch"
          v-model="isSsChangeName"
          inactive-text="修改截图名称"
          @change="ssChangeNameStateHandler"
      ></el-switch>
    </div>

    <!-- ────────────────────────────────────────────── 图片上传 ────────────────────────────────────────────── -->
    <uploadMultiple></uploadMultiple>

    <!-- ────────────────────────────────────────────── 设置截图按钮 ─────────────────────────────────────── -->
    <div class="btn">
      <el-button-group class="btn-group">
        <el-button class="btns" type="info" icon="el-icon-s-tools"         @click="setting"></el-button>
        <el-button class="btns" type="info" icon="iconfont icon-capture1"  @click="screenshot"></el-button>
      </el-button-group>
    </div>

    <!-- ────────────────────────────────────────────── 修改截图名称 ─────────────────────────────────────── -->
    <el-dialog
        title="截图名称"
        class="bjs-dialog"
        width="30%"
        :visible.sync="ssNameDialogShow">
      <el-input class="bjs-input" ref="refChangeNameInput" placeholder="请输入截图名称" v-model="ssName" @keyup.enter.native="ssChangeNameHandler"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button-group>
          <el-button size="mini" class="bjs-button btn-success" @click="ssChangeNameHandler">确 定</el-button>
          <el-button size="mini" class="bjs-button btn-success" @click="ssNameDialogShow=false">取消</el-button>
        </el-button-group>
      </div>
    </el-dialog>

    <!-- ────────────────────────────────────────────── 设置 ────────────────────────────────────────────── -->
    <el-dialog
        center
        title="设置"
        class="bjs-dialog"
        width="60%"
        style="margin-top: -50px"
        :visible.sync="settingDialogShow">
      <setting ref="sett" @callback="setting($event)" @refresh="init($event)" @loginCallback="loginCallback"></setting>
    </el-dialog>

  </div>
</template>

<script>
import { ipcRenderer, clipboard  } from 'electron'
import { uploadFile }              from '../../api/picture'
import { menuTemp }                from '../../assets/js/menus'
import { isNotNull, isNull }       from '../../assets/js/utils/validate'
import { getNowTime }              from "../../assets/js/utils/util"
import setting                     from "./setting/setting"
import uploadMultiple              from './uploadMultiple'

export default {
  name: 'leftMenu',
  data () {
    return {
      menus: [],               // 左侧菜单
      ssResultType: this.$GLOBAL.SS.RESULT_TYPE.IMAGE,       // 黏贴类型
      ssUrl: '',               // 上传路径
      // ───────────────────────────────── 修改截图名称 ─────────────────────────────────
      isSsChangeName: false,   // 是否修改截图名称
      ssName: '',              // 截图名称
      ssNameDialogShow: false, // 修改界面显示
      // ───────────────────────────────── 设置 ─────────────────────────────────
      settingDialogShow: false
    }
  },
  computed: {
    isLogin () {return this.$store.state.config.login.loginState === this.$GLOBAL.LOGIN.STATE.SUCCESS},
      theme () {return this.$store.state.config.theme.type}
  },
  watch: {
    isLogin (val) {
      if (val) {
        this.ssResultType   = this.$store.state.config.screenshot.resultType
        this.isSsChangeName = this.$store.state.config.screenshot.changeNameState
      }
    }
  },
  methods: {
    setting () {
      this.settingDialogShow = !this.settingDialogShow
      if(this.$refs.sett) {
        this.$refs.sett.init()
      }
    },
    loginCallback(){
      this.settingDialogShow = false
    },
    /** 注册远程截图事件,快捷键截图 */
    registerRemoteScreenshot () {
      // eslint-disable-next-line
      ipcRenderer.on('remote-screenshot',(event,args)=>{
        this.screenshot()
      })
    },
    /** 截图 */
    screenshot () {
      ipcRenderer.send('window-capture')
    },
    toMenu (path) {
      this.$router.push('/bjstk/' + path)
    },
    /*─────────────────────────────────────────────────────────────────────────────────────────────────────────*
     * 截图黏贴类型
     *─────────────────────────────────────────────────────────────────────────────────────────────────────────*/
    radioChangeHandler () {
      this.$store.commit('SET_SCREENSHOT_RESULT_TYPE',this.ssResultType)
      if(this.radioChangeReject()) {
        return
      }
      if(this.ssResultType ===  this.$GLOBAL.SS.RESULT_TYPE.URL) {
        this.$store.commit('SET_URL', this.wrapUrl());return
      }
      if (this.ssResultType === this.$GLOBAL.SS.RESULT_TYPE.MARKDOWN && isNotNull(this.ssUrl)) {
        this.$store.commit('SET_URL', this.wrapMarkdown());return
      }
      if (this.ssResultType === this.$GLOBAL.SS.RESULT_TYPE.IMAGE && isNotNull(this.ssUrl)) {
        this.$store.commit('SET_URL', this.ssUrl)
      }
    },
    wrapUrl () {
      let url = this.ssUrl
      clipboard.writeText(url)
      return url
    },
    wrapMarkdown () {
      let url = '![](' + this.ssUrl + ")"
      clipboard.writeText(url) // 写入剪切板
      return url
    },
    radioChangeReject () {
     if (this.ssResultType === this.$GLOBAL.SS.RESULT_TYPE.URL ||
         this.ssResultType === this.$GLOBAL.SS.RESULT_TYPE.MARKDOWN) {
       if (!this.isLogin) {
         this.$bjsNotify.error('未登陆无法黏贴为云端路径喔!')
         this.ssResultType = this.$GLOBAL.SS.RESULT_TYPE.IMAGE
         return true
       }
     }
     return false
    },
    /*─────────────────────────────────────────────────────────────────────────────────────────────────────────*
     * 修改截图名称
     *─────────────────────────────────────────────────────────────────────────────────────────────────────────*/
    ssChangeNameStateHandler () {
      this.$store.commit('SET_SCREENSHOT_CHANGE_NAME',this.isSsChangeName)
    },
    ssChangeNameHandler () {
      this.ssNameDialogShow = false
      this.uploadFileHandler(this.ssName)
      this.ssName = ''
    },
    /*─────────────────────────────────────────────────────────────────────────────────────────────────────────*
     * 截图回调
     *─────────────────────────────────────────────────────────────────────────────────────────────────────────*/
    /**
     * 1. 截图回调
     * 上传截图, 主进程调用 [PrintScr.exe] 结合后调用此方法
     */
    ssCallback () {
      ipcRenderer.on('capture-callback',() => {
        if (this.isSsChangeName) {
          this.ssNameDialogShow = true
        } else {
          this.uploadFileHandler(null)
        }
      })
    },
    /**
     * 2.
     * 从剪切板获取图片对象 [NativeImage]
     * 设置文件名称,若名称为空则为当前时间戳
     * 上传图片
     * 调用 [radioChangeHandler] 设置页面 footer 文件路径,并放入剪切板
     */
    uploadFileHandler (fileName) {
      if (!this.isLogin) {
        return
      }
      let image = clipboard.readImage()
      let blob = new Blob([image.toPNG()])
      let formData = new FormData()
      let name = isNull(fileName) ? 'FS_' + getNowTime() : fileName
      formData.append('file', blob, name + '.png')
      uploadFile(formData).then(resp => {
        this.ssUrl = resp.data
        this.radioChangeHandler()
        // agent.$emit('refreshFileCallback') // 调用文件刷新
      })
    },
    /**
     * 应用启动时检查登陆状态,若未登陆则开启登陆
     */
    checkLogin () {
      this.$store.dispatch('checkToken').then(() => {
      }).catch(() => {
        this.settingDialogShow = true
      })
    },
    init () {
      this.ssResultType = this.isLogin ? this.$store.state.config.screenshot.resultType : this.$GLOBAL.SS.RESULT_TYPE.IMAGE
      this.isSsChangeName = this.$store.state.config.screenshot.changeNameState
    }
  },
  mounted: function () {
    this.registerRemoteScreenshot()
    this.menus = menuTemp.left
    this.ssCallback()
    this.checkLogin()
  },
  components: {
    setting, uploadMultiple
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.leftMenu {
  @include flex(column,space-between);
  height: 100%;
  /* ────────────────────────────────────────────── 菜单 ────────────────────────────────────────────── */
  .menu {
    @include boxBase(100%,40%);
    padding-left: 0;
    border: 0;
    font-weight: bold;
    text-align: left;
  }
  /* ────────────────────────────────────────────── 工具栏 ────────────────────────────────────────────── */
  .divider {
    @include themeBgColor(#dbdbdb,#5a5a5a);
    /deep/ .el-divider__text.is-left {
      @include themeColor($theme-color-light,$theme-color-night-dark);
      @include themeBgColor($theme-bg-color-light,$theme-bg-color-night);
      padding: 0 5px;
      font-size: 12px;
    }
  }
  /* ────────────────────────────────────────────── 黏贴类型 ────────────────────────────────────────────── */
  .radio {
    @include flex(column,space-around,center);
    @include themeBgColor(#f5f5f5,#403e44);
    @include boxBase(100%,30%);
    text-align: right;
    .url /deep/ .el-radio-button__inner {
      padding: 5px 12px;
      [data-theme="night"] & {
        border-left: 1px solid #5a5a5a;
      }
    }
    .markdown /deep/ .el-radio-button__inner {
      padding: 1px 8px;
    }
    .picture /deep/ .el-radio-button__inner {
      padding: 5px 10px;
    }
  }
  /* ────────────────────────────────────────────── 截图名称 ────────────────────────────────────────────── */

  .logo {
    @include themeBgColor(#f5f5f5,#403e44);
    width: 100%;
    padding-top: 5px;
    text-align: center;
    cursor:pointer;
    flex-shrink:0;
  }

  .bjs-logo {
    @include logo_background();
    @include fontBase(23px,800,fantasy);
  }

  @keyframes glow {
    to {
      background-position: -300%;
    }
  }
}
/* ────────────────────────────────────────────── 按钮栏 ────────────────────────────────────────────── */
.leftMenu .btn {
  @include themeBgColor(#f5f5f5,$theme-bg-color-night);
  height: 40px;
  min-height: 40px;
}

.leftMenu .btn-group {
  @include boxBase(100%,40px);
  .btns {
    @include themeColor($theme-color-light,$theme-color-night-dark-3);
    @include themeBgColor(#e4e4e4,$theme-bg-color-night);
    @include boxBase(50%,100%);
    padding-top: 9px;
    font-size: 25px;
    border: 0;
    border-radius: 0;

    &:hover {
      @include themeColor($theme-color-light-dark,$theme-color-night-dark);
      @include themeBgColor(#e4e4e4,$theme-bg-color-night);
    }
  }
}

</style>
